<template>
  <div >
    <el-card
      shadow="hover"
      style="margin: 0 15px 15px 15px; max-height: 300px; max-width: 390px; "
    >
    <div :id="prop.graphId" style="height: 300px; width: 390px;">
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "LineGraph",
};
</script>

<script lang="ts" setup>
import { defineProps } from "vue";
import * as echarts from "echarts";
import { onMounted } from "@vue/runtime-core";

let prop = defineProps(["stats", "title", "graphId"]);

export interface StatItem {
  name: string;
  value: [string, number];
}

type EChartsOption = echarts.EChartsOption;
onMounted(function () {
  let chartDom = document.getElementById(prop.graphId)!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  let data: StatItem[] = prop.stats! as StatItem[];

  option = {
    title: {
      text: prop.title,
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params: any) {
        params = params[0];
        return params.value.join(" -> ");
      },
      axisPointer: {
        animation: false,
      },
    },
    xAxis: {
      type: "category",
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "100%"],
      splitLine: {
        show: true,
      },
    },
    series: [
      {
        name: "speed",
        type: "line",
        showSymbol: false,
        data: data,
      },
    ],
  };

  setInterval(function () {
    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          data: data,
        },
      ],
    });
  }, 2000);

  option && myChart.setOption(option);
});
</script>

<style>
</style>